<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<head>
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery-jtemplates.js" type="text/javascript"></script>
<script src="js/plugin/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery.filter_input.js" type="text/javascript"></script>
<script src="js/hnl-common.js" type="text/javascript"></script>
<link href="css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>
<link href="css/hnl-main.css" rel="stylesheet"></link>
<link href="css/hnl-table.css" rel="stylesheet"></link>
<script>
	
	$(document).ready(function() {
		$("#consultantInfo").addClass("ui-widget");
		$("#dialog:ui-dialog").dialog("destroy");
		
		/*initial*/
		var uID = getFromAttribute(${userID});
		if(uID==0){
			uID=getFromAttribute(${param.userID});
		}
		
		$.getJSON("/hnl/PopulateDropdown.do?typeName=USER_ROLES&isNA=NO",
			function(dropdowndata) {
				setdropdown(dropdowndata, "#roleDropdown");
			});
			

		if(uID==0){	//add new user				
			$("#updateConsultantButn").hide();
			$("#fixPossword").hide();			
			$("#TrEmployeeID").hide();	
			$("#TrLastLoginDate").hide();			

		}else{		//update user
			$("#addConsultantButn").hide();
			$("#newPasswordDIV").hide();
			$("#userID").attr("readonly","readonly");
			$("#userID").attr("disabled",true);			
			$("#lastLoginDate").attr("readonly","readonly");
			$("#lastLoginDate").attr("disabled",true);
			
			/*Load Form Info*/
			$.getJSON("/hnl/LoadConsultant.do?userID="+uID, function(data) {
				$("#userID").val(uID);
				$("#firstName").val(data.firstname);
				$("#lastName").val(data.lastname);
				$("#email").val(data.email);
				$("#lastLoginDate").val(data.lastLoginDate);
				$("#roleDropdown").children().each(function(){
					if ($(this).text() == data.roleNameText){
						$(this).attr("selected","true"); 
					}
				});
			});
		}
		
		
		/*Dialogs */
		$("#dialog-fixPassword").dialog({
			autoOpen : false,
			//resizable: false,
			height : 320,
			width : 450,
			modal : true,
			buttons : {
				"Confirm" : function() {
					var ps1 = $("#password").val();
					var ps2 = $("#repassword").val();
					//alert(ps1+", "+ps2);
					if((ps1 != ps2) || (ps1=="")|| (ps2=="")){						
						$("#alert-msg").html("The Password field and Retype Password field must be the same and can't empty !!");
						$("#dialog-alert").dialog("open");
					}else{					
						$(this).dialog("close");
						$.ajax({
							type:"POST",
							url:"/hnl/UpdateUserPassword.do",
							data:{	
								userID:uID,
								password:ps1
							},
							dataType:"json",
							success: function(data) {
								$.getJSON("/hnl/LoadConsultant.do?userID="+uID, function(data) {
									 $("#userID").val(uID);
									 $("#firstName").val(data.firstname);
									 $("#lastName").val(data.lastname);
									 $("#email").val(data.email);
									 $("#lastLoginDate").val(data.lastLoginDate);

								 });
								$(this).dialog("close");
							}
						});
					}

				},
				Cancel : function() {
					$(this).dialog("close");
				}
			}
		});	
		
		$("#dialog-alert").dialog({
			autoOpen : false,
			//resizable: false,
			height : 220,
			width : 450,
			modal : true,
			buttons : {
				Cancel : function() {
					$(this).dialog("close");
				}
			}
		});		
				

		/*event*/		
		$("#fixPossword").click(function(evt) {
			evt.preventDefault();
			$("#dialog-fixPassword").dialog("open");
		});		
		
		$("#addConsultantButn").click(function(evt) {
			evt.preventDefault();
			
			var newps1 = $("#newPassword").val();
			var newps2 = $("#newRepassword").val();
			var mail = $("#email").val();
			var mailIsDuplicate = false;	//true:existed email, false:no existed email
			var validOK = true;					
			
			//check password
			if((newps1 != newps2) || (newps1=="")|| (newps2=="")){
				validOK = false;
				$("#alert-msg").html("The Password field and Retype Password field must be the same and can't empty !!");
				$("#dialog-alert").dialog("open");

			}
			//check email format
			if (mail==""){
				validOK = false;
				$("#alert-msg").html("The Email can't empty !!");
				$("#dialog-alert").dialog("open");
			}else{
				if (!IsValidEmail(mail)){
					
					validOK = false;
					$("#alert-msg").html("Please enter a valid email address. !!");
					$("#dialog-alert").dialog("open");
				}
			}
			
			if (validOK){
				//check email duplicate
				$.ajax({
					type:"POST",
					url:"/hnl/CheckDuplicateEmail.do",		
					data:{	
						userID:uID,
						email:mail
					},
					dataType:"json",
					success: function(data) {
						mailIsDuplicate = data.validateOK;

						if (mailIsDuplicate){
							validOK = false;
							$("#alert-msg").html("Email already exists, please chang to another Email address !!");
							$("#dialog-alert").dialog("open");
						}else{
							AddConsultant(uID);
						}
					}
				});	
			}
		});

		$("#updateConsultantButn").click(function(evt) {
			evt.preventDefault();
			
			var mail = $("#email").val();
			var validOK = true;
			
			//check email format
			if (mail==""){
				validOK = false;
				$("#alert-msg").html("The Email can't empty !!");
				$("#dialog-alert").dialog("open");
			}else{
				if (!IsValidEmail(mail)){					
					validOK = false;
					$("#alert-msg").html("Please enter a valid email address. !!");
					$("#dialog-alert").dialog("open");
				}
			}
			
			if (validOK){
				//check email duplicate
				$.ajax({
					type:"POST",
					url:"/hnl/CheckDuplicateEmail.do",		
					data:{	
						userID:uID,
						email:mail
					},
					dataType:"json",
					success: function(data) {
						mailIsDuplicate = data.validateOK;

						if (mailIsDuplicate){
							validOK = false;
							$("#alert-msg").html("Email already exists, please chang to another Email address !!");
							$("#dialog-alert").dialog("open");
						}else{
							AddConsultant(uID);
						}
					}
				});	
			}
		});
		
		$("#backUserList").click(function(evt) {
			evt.preventDefault();			
			window.location.replace("userDashboard.jsp");
		});
		
	});	
	
	function AddConsultant(uID){
		$("#consultantInfo").attr("action", "/hnl/AddConsultant.do?userID="+uID);
		$("#consultantInfo").attr("method", "post");
		$("#consultantInfo").submit();
	}
	
</script>
</head>
<body class="formBody">
	
	<form id="consultantInfo">
		<fieldset class="mainFieldSet ">
			<legend class="mainLegend">Consultant Info</legend>
			<table class="fourColumn">
				<tr id="TrEmployeeID" name="TrEmployeeID">
					<td class="oddColl" >Employee ID</td>
					<td colspan="3" ><input type="text" id="userID" name="userID"
						/>
					</td>
				</tr>
				<tr>
					<td  class="oddColl" >First Name<em> *</em></td>
					<td class="evenColl"><input type="text" id="firstName"
						name="firstName" maxlength="50" /></td>
					<td  class="oddColl">Last Name<em> *</em></td>
					<td class="evenColl"><input type="text" id="lastName"
						name="lastName" maxlength="50" /></td>
				</tr>
				<tr>
					<td>Email</td>
					<td colspan="3"><input type="text" id="email" name="email" maxlength="100" /></td>
				</tr>
				<tr>
					<td>Role</td>
					<td><select id="roleDropdown"
						name="roleDropdown">
					</select></td>
				</tr>
				<tr id="TrLastLoginDate" name="TrLastLoginDate">
					<td>Last Login Date</td>
					<td colspan="3"><input type="text" id="lastLoginDate"
						name="lastLoginDate" />
					</td>
				</tr>
			</table>

		</fieldset>
		<div id="newPasswordDIV">
			<fieldset class="mainFieldSet ">
				<legend class="mainLegend">Password</legend>
				<table class="twoColumn">
					<tr>
						<td class="firstCol">Password</td>
						<td class="secondCol"><input type="password" id="newPassword" name="newPassword" maxlength="20" value="" /></td>
					</tr>
					<tr>
						<td>Retype Password</td>
						<td><input type="password" id="newRepassword" name="newRepassword"  maxlength="20" /></td>
					</tr>
				</table>
			</fieldset>
		</div>
		<table>
			<tr><td> 
				<input id="addConsultantButn" name="addConsultantButn" type="button" value="ADD">
				<input id="updateConsultantButn" name="updateConsultantButn" type="button" value="UPDATE">
				<input id="fixPossword" name="fixPossword" type="button" value="Change Password">
				<input id="backUserList" name="backUserList" type="button" value="Back to Main">
			</td></tr>				
		</table>		
	</form>
	
	<!-- popup dialog-fixPassword -->
	<div id="dialog-fixPassword" title="Change Password">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>
				Please type the password
		</p>
		<table>
			<tr><td>Password</td><td><input type="password" id="password" name="password" value="" /></td></tr>
			<tr><td>Retype Password</td><td><input type="password" id="repassword" name="repassword" value="" /></td></tr>
		</table>
	</div>
	<div id="dialog-alert" title="Warning">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>
				<div id="alert-msg" name="alert-msg"></div>
				
		</p>
	</div>
</body>